<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 120 120"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#00407B" d="M22.488 9.586h75.024a3.746 3.746 0 0 1 3.75 3.75v90.012a3.746 3.746 0 0 1-3.75 3.75h-7.137a3.746 3.746 0 0 1-3.75-3.75 3.746 3.746 0 0 1 3.75-3.75h3.387V17.086H26.25v82.512H30a3.746 3.746 0 0 1 3.75 3.75 3.746 3.746 0 0 1-3.75 3.75h-7.5a3.746 3.746 0 0 1-3.75-3.75V13.336a3.736 3.736 0 0 1 3.738-3.75Z"/><path fill="#06F" d="M40.168 39a3.229 3.229 0 1 0 0 6.458 3.229 3.229 0 0 0 0-6.458Zm39.665 0a3.23 3.23 0 1 0 0 6.46 3.23 3.23 0 0 0 0-6.46Zm-19.832 4.781a3.23 3.23 0 1 0 0 6.458 3.23 3.23 0 0 0 0-6.458Zm-19.833 6.202a5.167 5.167 0 1 0 0 10.333 5.167 5.167 0 0 0 0-10.333Zm39.665 0a5.167 5.167 0 1 0 0 10.334 5.167 5.167 0 0 0 0-10.334ZM60.001 56.7a3.229 3.229 0 1 0 0 6.458 3.229 3.229 0 0 0 0-6.458Zm-19.833 8.14a3.229 3.229 0 1 0 0 6.458 3.229 3.229 0 0 0 0-6.458Zm39.665 0a3.231 3.231 0 1 0 0 6.462 3.231 3.231 0 0 0 0-6.462Zm-19.832 2.84a5.169 5.169 0 1 0 0 10.338 5.169 5.169 0 0 0 0-10.338Zm-19.833 8.14a5.168 5.168 0 1 0 .002 10.337 5.168 5.168 0 0 0-.002-10.337Zm39.665 1.937a3.232 3.232 0 1 0 0 6.464 3.232 3.232 0 0 0 0-6.464Zm-19.832 4.784A3.229 3.229 0 1 0 60 89a3.229 3.229 0 0 0 0-6.458Z"/><rect fill="#00407B" rx="3" height="6" width="41" y="101" x="39"/><rect fill="#00407B" rx="3" height="6" width="28" y="27" x="35"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Solutionskey6 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
